<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/25
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <%@include file="../../common/header.jsp"%>

    <script>
        var layer;
        $(function () {
            layui.use('layer',function () {
                layer=layui.layer;
            });
        });

        //查询部门信息
        function query(parent_id) {
            $.ajax({
                url:"${pageContext.request.contextPath}/dept.action?method=query&parent_id="+parent_id,
                type:"get",
                dataType:"json",
                success:function (data) {
                    $("#tb_dept").empty();
                    for (var i = 0; i < data.length; i++) {
                        var tr="<tr>" +
                            "<td>"+data[i].dept_id+"</td>" +
                            "<td>"+data[i].dept_name+"</td>" +
                            "<td>"+data[i].leader+"</td>" +
                            "<td>"+data[i].phone+"</td>" +
                            "<td>"+data[i].email+"</td>" +
                            "<td>"+$("#op").html().replace('{pid}',data[i].dept_id).replace('{sid}',data[i].dept_id).replace('{did}',data[i].dept_id).replace('{ddid}',data[i].dept_id)+"</td>" +
                            "</tr>";
                        $("#tb_dept").append(tr);
                    }
                },error:function(e){
                    alert(e);
                }
            });
        }

        function showSub(pid){
            $.ajax({
                url:"${pageContext.request.contextPath}/dept.action?method=query&parent_id="+pid,
                type:"get",
                dataType:"json",
                success:function (data) {
                    $("#tb_dept2").empty();
                    for (var i = 0; i < data.length; i++) {
                        var tr= "<tr>" +
                            "<td>"+data[i].dept_id+"</td>" +
                            "<td>"+data[i].dept_name+"</td>" +
                            "<td>"+data[i].leader+"</td>" +
                            "<td>"+data[i].phone+"</td>" +
                            "<td>"+data[i].email+"</td>" +
                            "<td>"+$("#op2").html().replace('{sid}',data[i].dept_id).replace('{ddid}',data[i].dept_id)+"</td>" +
                            "</tr>";
                        $("#tb_dept2").append(tr);
                    }
                },
                error:function(e){
                    alert(e);
                }
            });
        }

        //添加前初始化
        function sub_add(pid){
            $("#form1")[0].reset();
            //绑定父级编号
            $("#parent_id").val(pid);

        }

        function dept_add(){
            $.ajax({
                url:"${pageContext.request.contextPath}/dept.action?method=add",
                type:"post",
                data:$("#form1").serialize(),
                dataType:"json",
                success:function(data){
                    layer.msg("添加或修改成功");
                    query(0);
                    showSub(100);
                },
                error:function (x,s,e) {
                    alert("错误："+s+e);
                }
            });

        }

        //修改前查询
        function queryOne(dept_id){
            $.ajax({
                type: "get", //请求的方式：post
                url:"${pageContext.request.contextPath}/dept.action?method=queryOne&dept_id="+dept_id,//请求的路径
                dataType:'json',//返回的数据的类型
                // 成功后要执行的回调函数
                success: function(msg){

                    $("#dept_id").val(dept_id);
                    $("#parent_id").val(msg.parent_id);
                    $("#dept_name").val(msg.dept_name);
                    $("#order_num").val(msg.order_num);
                    $("#leader").val(msg.leader);
                    $("#phone").val(msg.phone);
                    $("#email").val(msg.email);

                },
                error:function (xhr,info,e) {
                    alert("错误："+info+e);
                }
            });
        }


        function dept_delete(dept_id){
            $.ajax({
                url:"${pageContext.request.contextPath}/dept.action?method=delete&dept_id="+dept_id,
                typr:"post",
                dataType:"json",
                success:function (data) {
                    if (data>0){
                        layer.msg("删除成功");
                        query(0);
                    }

                },error:function (e) {
                    alert(e);
                },
            });
        }




        //load事件
        $(function () {
            //查询校区
            query(0);
        });
    </script>
</head>
<body>
<%--内容区--%>
<table class="table table-bordered table-hover ">
    <caption>校区信息</caption>
    <thead>
        <div class="hidden-sm hidden-xs action-buttons">
            <a class="add blue" href="#" onclick="sub_add(0)" data-toggle="modal" data-target="#myModal">
                <i class="ace-icon fa fa-search-plus "></i>添加校区
            </a>
        </div>
    <tr>
        <th>编号</th>
        <th>校区名称</th>
        <th>负责人</th>
        <th>电话</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb_dept">
    </tbody>
</table>



<script type="text/html" id="op">
    <div class="hidden-sm hidden-xs action-buttons">
        <a class="view blue" href="#" onclick="showSub({pid})" >
            <i class="ace-icon fa fa-search-plus "></i>查看二级部门
        </a>
        <a class="add blue" href="#" onclick="sub_add({sid})" data-toggle="modal" data-target="#myModal" >
            <i class="ace-icon fa fa-search-plus "></i>添加二级部门
        </a>
        <a class="green" href="#" onclick="queryOne({did})" data-toggle="modal" data-target="#myModal" >
            <i class="ace-icon fa fa-pencil "></i>编辑
        </a>
        <a class="red" href="#" onclick="dept_delete({ddid})">
            <i class="ace-icon fa fa-trash-o "></i>删除
        </a>
    </div>
</script>

<script type="text/html" id="op2">
    <div class="hidden-sm hidden-xs action-buttons">
        <a class="green" href="#" onclick="queryOne({sid})" data-toggle="modal" data-target="#myModal">
            <i class="ace-icon fa fa-pencil  "></i>编辑
        </a>
        <a class="red" href="#" onclick="dept_delete({ddid})">
            <i class="ace-icon fa fa-trash-o "></i>删除
        </a>
    </div>
</script>

    <hr/>
    <%--二级部门内容区--%>
    <table class="table table-bordered table-hover ">
        <caption>部门信息</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>部门名称</th>
            <th>负责人</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb_dept2">
        </tbody>
    </table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">

                </h4>
            </div>
            <div class="modal-body">
                <form id="form1">
                    <div class="form-group">
                        <label class="col-lg-12 control-label">部门或校区名称</label>
                        <div class="col-lg-12">
                            <input type="hidden" class="form-control" id="parent_id" name="parent_id" />
                            <input type="hidden" class="form-control" id="dept_id" name="dept_id" />
                            <input type="text" class="form-control"  id="dept_name" name="dept_name" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-12 control-label">负责人</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="leader" name="leader" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">电话</label>
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="phone" name="phone" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-12 control-label">邮箱</label>
                        <div class="col-lg-12">
                            <input type="email" class="form-control" id="email" name="email" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="dpetUpdate" >
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
<script>
    $("#dpetUpdate").on("click", function(){
        var bootstrapValidator = $("#form1").data('bootstrapValidator');
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            dept_add();
        }
        else return;
    });
    $(document).ready(function() {
        $('#form1').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                dept_name: {
                    message: '',
                    validators: {
                        notEmpty: {message:'部门不能为空'},
                        stringLength: {
                            min: 2,
                            max: 6
                        },
                        regexp: {
                            regexp: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
                        }
                    }
                },
                email: {
                    message: '',
                    validators: {
                        notEmpty: {
                            message:'邮箱不能为空'
                        },
                        regexp: {
                            regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
                        }
                    }
                },
                phone: {
                    message: '',
                    validators: {
                        notEmpty: {message:'手机号不能为空'},
                        regexp: {
                            regexp: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
                        }
                    }
                },
                leader: {
                    message: '',
                    validators: {
                        notEmpty: {message:'负责人不能为空'},
                        stringLength: {
                            min: 0,
                            max: 30
                        }
                    }
                }
            }
        });
    });
</script>
